<template>
  <div
    class="echarts"
    id="echartslistda"
    ref="chartRef"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { BarChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  // 新增：图例组件
  LegendComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer,SVGRenderer } from "echarts/renderers";
import type {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineSeriesOption,
} from "echarts/charts";
import type {
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption,
  // 新增：图例组件类型定义
  LegendComponentOption,
} from "echarts/components";
import type { ComposeOption } from "echarts/core";
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
  | LegendComponentOption // 新增：图例组件类型
>;
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  SVGRenderer, // 注册 SVG 渲染器
  // 新增：注册图例组件
  LegendComponent,
]);
const chartRef = ref<HTMLElement | null>(null);
const props = defineProps<{
  avgTates: [];
}>();
onMounted(() => {
 
  if (chartRef.value) {
    // const chart = echarts.init(chartRef.value);
    const chart = echarts.init(
        chartRef.value,
        null,
        { renderer: "svg" } // ⚠️ 必须指定 SVG 渲染器
      );
    // There should not be negative values in rawData
    const rawData = [props.avgTates];
    const totalData = [];
    for (let i = 0; i < rawData[0].length; ++i) {
      let sum = 0;
      for (let j = 0; j < rawData.length; ++j) {
        sum += rawData[j][i];
      }
      totalData.push(sum);
    }

    const grid = {
      // left: 100,
      // right: 100,
      // top: 50,
      bottom: 20,
    };
    const barColors = ["#5B8FF9", "#5AD8A6", "#FF6B6B", "#FFC107", "#9C27B0"]; // 可按需添加更多颜色
    const seriesColors = ["#5B8FF9", "#5AD8A6"]; // 定义每个系列对应的颜色
    const series = ["常模对比"].map((name, sid) => {
      return {
        name,
        type: "bar",
        stack: "total",
        barWidth: "60%",
        barMaxWidth: 50,
        data: rawData[sid],
        itemStyle: {
          color: (params: any) => {
            // ECharts 支持这种简写
            return params.dataIndex === 0 ? "#5B8FF9" : "#5AD8A6";
          },
        },
      };
    });
    const option = {
      legend: {
        right: "10%", // 距离图表右侧 10% 的位置
        itemWidth: 10, // 调整图例图标宽度
        itemHeight: 10, // 调整图例图标高度，宽高一致以保证是圆
      },

      tooltip: {
        trigger: "axis",
      },
      yAxis: {
        //   min: 0, // 若需要可以设置最小值，这里设置为 0
        max: 100, // 设置 y 轴的最大值为 100
      },
      title: {
        text: "常模对比",
      },
      grid,
      // yAxis: {
      //   // type: 'value',
      //   // max: 100 // 设置 y 轴的最大值为 100
      // },
      xAxis: {
        type: "category",
        data: ["常模得分率", "我的得分率"],
      },
      series,
    };
    const chartDom = document.getElementById("echartslistda");
    if (chartDom) {
      const myChart = echarts.init(
        chartDom,
        null,
        { renderer: "svg" } // ⚠️ 必须指定 SVG 渲染器
      );
      // const myChart = echarts.init(chartDom);
      myChart.setOption(option);
      // 监听窗口大小变化事件
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
    chart.setOption(option);
  }
});
</script>
<style lang="less" scoped>

</style>
